import React, { Component, useEffect, useState } from 'react'


export default class Hoosk extends Component {
    render() {
        return <React.Fragment>
            <Example />
            <Document />
        </React.Fragment>
    }
}

/* easy hooks */
function Example() {
    const [count, setCount] = useState(0)

    return <div>
        <p>you clicked me <span style={{ color: 'red' }}>{count}</span> times</p>
        <button onClick={() => setCount(count + 1)}>increment count</button>
    </div>
}


/* hooks Side Effect */

function Document() {
    const [count, setCount] = useState(0)
    const [time,setTime] = useState("")

    /* 类似  componentDidMount componentDidUpdate  */
    useEffect(() => {
        document.title = `you clicked me${count}times`
    })
    /* 传一个参数，表示依赖的值变了，重新执行副效应 */
    useEffect(()=>{
        console.log("===")
        setTime("hello "+count)
    })
    return <div>
        <p>you clicked me <span style={{ color: 'red' }}>{count}</span> times</p>
        <button onClick={() => setCount(count + 1)}>increment count</button>
        <p>{time}</p>
    </div>
}
